<template>
  <div>
    <div class="head">
      <p class="text">编辑资料</p>
      <van-icon
        @click="onClickLeft()"
        size="20"
        color="whitesmoke"
        name="arrow-left"
        class="icon"
      />
    </div>
    <div class="con" @click="jumpTouxiang()">
      <span class="sp1">头像</span>
      <!-- <van-image
        class="img1"
        round
        width="5rem"
        height="5rem"
        src="https://img.yzcdn.cn/vant/cat.jpeg"
      /> -->
      <van-image
         
        v-if="id===null"
        @click="jumpLogin()"
          class="img1"
          round
          width="3rem"
          height="3rem"
          src=""
        />
        <van-image
        v-else
        @click="jumpTouxiangDetail()"
          class="img1"
          round
          width="3rem"
          height="3rem"
          :src="url"
        />
    </div>
    <div class="con" @click="jumpBackground()">
      <span class="sp1">个人主页背景</span>
      <van-image
        class="img1"
        width="5rem"
        height="5rem"
        src="static/img/background.jpg"
      />
    </div>
    <div class="con1" @click="jumpChangeUserName()">
      <span class="sp3">用户名</span>
      <span class="sp2">{{username}}</span>
    </div>
    <div class="con1">
      <van-cell class="bir" @click="showPopup">性别</van-cell>
      <span class="sp5" v-if="this.radio === '0'">未设置</span>
      <span class="sp5" v-if="this.radio === '1'">男</span>
      <span class="sp5" v-if="this.radio === '2'">女</span>
      <van-popup v-model="show" position="bottom" :style="{ height: '30%' }"
        ><van-radio-group v-model="radio">
          <van-cell-group>
            <van-cell title="未设置" clickable @click="radio = '0'">
              <template #right-icon>
                <van-radio name="0" />
              </template>
            </van-cell>
            <van-cell title="男" clickable @click="radio = '1'">
              <template #right-icon>
                <van-radio name="1" />
              </template>
            </van-cell>
            <van-cell title="女" clickable @click="radio = '2'">
              <template #right-icon>
                <van-radio name="2" />
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
      </van-popup>
    </div>
    <div class="con1">
      <van-field
      class="bir"
        readonly
        clickable
        name="picker"
        :value="date_value"
        label="生日"
        placeholder="点击选择年月日"
        @click="showTime = true"
      />
      <van-popup v-model="showTime" position="bottom">
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          title="选择年月日"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="onDate"
          @cancel="showTime = false"
        />
      </van-popup>
    </div>
    <div class="con1">
      <van-field
        class="bir"
        readonly
        clickable
        name="picker"
        :value="value"
        label="城市"
        placeholder="点击选择城市"
        @click="showPicker = true"
      />
      <van-popup v-model="showPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          @confirm="onConfirm"
          @cancel="showPicker = false"
        />
      </van-popup>
    </div>
    <div class="con1">
      <span class="sp3">签名</span>
    </div>
    <div class="con1" @click="jimpAccount()">
      <span class="sp3">账号与绑定</span>
      <van-icon class="sp4" name="arrow" />
    </div>
    <!-- <van-button class="btn1" type="info">确认修改</van-button> -->
  </div>
</template>
<script>
export default {
  data() {
    return {
       username:sessionStorage.getItem('username'),
       id: sessionStorage.getItem('roleId'),
      url: sessionStorage.getItem('src'),
      show: false,
      msg: '',
      radio: '0',
      showShare: false,
      value: '',
      columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
      showPicker: false,
      showTime: false,
      date_value:'',
      currentDate: new Date(),
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
    };
  },
  methods: {
    // 选择时间
    onDate(date) {
      this.date_value = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
      this.showTime = false;
    },
    // 跳转到详细信息
    onClickLeft() {
      this.$router.push('/mine');
    },
    onConfirm(values) {
      this.value = values;
      this.showPicker = false;
    },
    showPopup() {
      this.show = true;
    },
    // 跳转到修改头像
    jumpTouxiang(){
      this.$router.push('/touxiang');
    },
    // 跳转到更换背景
    jumpBackground(){
      this.$router.push('/background');
    },
    jumpChangeUserName(){
      this.$router.push('/username');
    },
    jimpAccount(){
      this.$router.push('/account');
    },
  },
};
</script>
<style scoped>
.btn1{
    position: relative;
    top: 2.6rem;
    left: 0.6rem;
    width: 97%;
}
.head {
  width: 100%;
  height: 4rem;
  background-color: rgb(108, 144, 243);
}
.text {
  text-align: center;
  font-size: 1.6rem;
  color: whitesmoke;
  line-height: 4rem;
}
.icon{
  position: absolute;
  top: 1.1rem;
  /* left: 0px; */
}
.con {
  width: 100%;
  height: 8rem;
  background-color: whitesmoke;
  position: relative;
}
.con1 {
  width: 100%;
  height: 4rem;
  background-color: whitesmoke;
  position: relative;
}
.bir {
  width: 100%;
  height: 4rem;
  background-color: whitesmoke;
  position: relative;
  font-size: 1.6rem;
  margin-left: -0.6rem;
}
.sp1 {
  position: absolute;
  line-height: 8rem;
  left: 1rem;
  color: rgb(56, 55, 55);
  font-size: 1.6rem;
}
.sp3 {
  position: absolute;
  line-height: 4rem;
  left: 1rem;
  color: rgb(56, 55, 55);
  font-size: 1.6rem;
}
.img1 {
  position: absolute;
  top: 1.5rem;
  right: 2rem;
}
.sp2 {
  position: absolute;
  top: 1.2rem;
  left: 29rem;
  color: rgb(90, 88, 88);
  font-size: 1.6rem;
}
.sp4 {
  position: absolute;
  line-height: 4rem;
  left: 35rem;
  color: rgb(90, 88, 88);
  font-size: 1.6rem;
}
.sp5 {
  position: absolute;
  top: 0.9rem;
  left: 29rem;
  color: rgb(90, 88, 88);
  font-size: 1.6rem;
}
</style>